<template>
  <div class="approDetail">
      <div class="approveItem">
            <h1 class="titleDesc">
                <!-- <span v-if="isLeaveICon">{{res.name}}的请假申请</span>
                <span v-else>{{res.name}}的销假申请</span> -->
                <span>{{wfBusinessProcessData.emplname}}的{{res.executeType | handleTitle}}假申请</span>
            </h1>
            <p>
                <i class="icon-approve"></i>
                <span :class='handleStatus(res.status,"me")'>{{handleStatus(res.status)}}</span>
            </p>
            <div @click="showDetail" v-if="isShowRelate" class="showButton">
                <span>查看该流程{{res.executeType | handleTarget}}假申请</span>
            </div>
            <div class="borderColor"></div>    
      </div>
      <div class="desc">
            <ul>
                <li>
                	<span class="title">审批编号</span>
                	<span class="desc_detail">{{res.id}}</span>
                </li>
                <li>
                	<span class="title">{{res.executeType | handleTitle}}假类型</span>
                	<span class="desc_detail">{{wfBusinessProcessData.processTypeName}}</span>
                </li>
                <li>
                	<span class="title">所在部门</span>
                	<span class="desc_detail">{{wfBusinessProcessData.deptName}}</span>
                </li>
                <li>
                    <span class="title">{{isLeaveOrXiao(this.res.executeType) =='请'?'':'实际'}}开始时间</span>
                    <span class="desc_detail">{{(res.executeType=="3" || res.executeType=="4" ? wfBusinessProcessData.effeStartTime : wfBusinessProcessData.startTime) | handleDisplayDate}}&nbsp;{{(res.executeType=="3" || res.executeType=="4" ?wfBusinessProcessData.effeStartTimeHalfDaySign : wfBusinessProcessData.startTimeHalfDaySign) | ampm}}</span>
                </li>
                <li>
                    <span class="title">{{isLeaveOrXiao(this.res.executeType) =='请'?'':'实际'}}结束时间</span>
                    <span class="desc_detail">{{(res.executeType=="3" || res.executeType=="4" ? wfBusinessProcessData.effeEndTime : wfBusinessProcessData.endTime) | handleDisplayDate}}&nbsp;{{(res.executeType=="3" || res.executeType=="4" ?wfBusinessProcessData.effeEndTimeHalfDaySign : wfBusinessProcessData.endTimeHalfDaySign) | ampm}}</span>
                </li>
                <li>
                    <span class="title">{{res.executeType | handleTitle}}假天数</span>
                    <span class="desc_detail">{{ res.executeType=="3" || res.executeType=="4" ? wfBusinessProcessData.effeLeaveDay : wfBusinessProcessData.leaveDay}} 天{{ res.executeType=="3" || res.executeType=="4" ? wfBusinessProcessData.showSickWorkingData : wfBusinessProcessData.showWorkingData}}</span>
                </li>
                <li>
                    <span class="title">{{res.executeType | handleTitle}}假事由</span>
                    <span class="desc_detail">{{handleLeaveReason(res.executeType)}}</span>
                </li>
                <li>
                	<span class="title">知会人  </span>
                	<span class="desc_detail">{{zhihuirens.join(' , ')}}</span>
                </li>

            </ul>



            <div class="startItem">
                <div class="leftCon">
                    附&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;件
                </div>

                <div class="fluid">
                    <img :src='Axios.baseURI+"/"+URL.downloadFile.url+"?id="+k.annexId+"&token="+token' @click="previewPhoto(index)" v-for='(k,index) in imgList'  alt="">
                    <div
                        
                        download="img"
                        style='display:block;line-height:0.6rem'
                        class='color-third' 
                        @click="previewFile(k)"
                        v-for='(k,i) in fileList'>
                        <i :class="textExtension(k)"></i>
                        <span>{{k.fileName}}</span>
                        </div>

                </div>
            </div>

      </div>
      <div class="bgColor"></div>
      <div class="progress">
            <div class="leftCon">
                <div></div>
            </div>
            <div class="fluid">
                  <ul>
                      <li v-for='(k,i) in LogList' :class="setColor(k)">
                          <!-- <i :class='setColor(k)' class="icon-process"></i>
                          <span class="name">{{k.assigneeName}}</span>
                          <span class="dept">({{k.deptDescr}})</span>
                          <span :class='handleColor(k.status)' class="start">{{k.status | alterStatusTitle}}</span>
                          <span class="time">{{k.excuteTime | handleLogDate}}</span>
                          <div class="apprDesc" v-if='k.applyComment'>{{k.applyComment || ''}}</div> -->
                      
                        <template>
                            <i  :class='setColor(k)' class="icon-process"></i>
                            <span class="name">{{k.status == 5 ?  k.oldAssigneeName  : k.assigneeName }}</span>
                            <span class="dept">({{k.deptDescr}})</span>
                                <span  class="start">{{(k.statusShow  ? k.statusShow : k.status) | alterStatusTitle}}</span>
                                <div class="time">{{(k.statusShow ? '' : k.excuteTime) | handleDateToSeconds}}</div>
                                <div v-if="k.wfSubProcessNodes && k.wfSubProcessNodes.length" v-for="q in k.wfSubProcessNodes">
                                    <span class="name">{{q.assigneeName}}</span>
                                    <span class="dept">({{q.deptDescr}})</span>
                                    <span >{{q.statusShow ? q.statusShow: q.status | alterStatusTitle}}{{q.statusShow ? '':'(代理)'}}</span>
                                    <span class="time">{{(k.statusShow ?  k.excuteTime : '') | handleDateToSeconds}}</span>
                                    <div class="apprDesc" v-if='q.applyComment'>{{q.applyComment || ''}}</div>                                    
                                </div>
                            <div class="apprDesc" v-if='k.applyComment'>{{k.status == 5 ? '' : k.applyComment }}</div>
                        </template>
                      
                      </li>
                      
                  </ul>
            </div>          
      </div>
      <div class="bgColorBottom"  v-if="xiaojiaVisible || isShowCancel">

      </div>
      <div class="fixedToBottom" v-if="xiaojiaVisible">
          <div  @click="goToDetail('1')"><span>我要销假</span></div>
      </div>
      <div class="fixedToBottom" v-if="isShowCancel">
          <div  @click="cancelLeave"><span>撤销申请</span></div>
      </div>
      <!-- <div class="fixedToBottom" v-if="xiaojiaVisible">
          <div class="approBtn">
                <div class="approBtnCol" @click="goToDetail('1')">同意</div>
                <div class="approBtnCol" @click="goToDetail('2')">驳回</div>
                <div class="approBtnCol" @click="addCopyPeo">知会</div>
          </div>
      </div> -->
      
      <mt-spinner v-if="spinnerShow" class="spinner" type="fading-circle" color="#26a2ff"></mt-spinner>
      <v-panel v-if="showPanel" :secondShow.sync="secondShow" :relateId="relate_id" :isShow.sync="showPanel" :isFirstShow.sync="isFirstShow" @loadEnd="loadEnd"></v-panel>

  </div>

</template>

<script>
import Vue from "vue";
import { Spinner,Toast} from "mint-ui";
Vue.component(Spinner.name, Spinner);
import preview from '@/common/js/preview' 
import Panel from '@/components/public/panel'

export default {
  name: 'app',
  data() {
    return {
      approve:"部门领导审批",
      res:{},
      query:null,
      fileList:[],
      LogList:[],
      busi_id:null,
      zhihuirens:[],

      imgList:[],
      imgUrlList:[],

      relateId:null,
      showPanel:false,
      isFirstShow:true,
      secondShow:false,
      spinnerShow:false,

      isShowBack:false,

      jsapi_ticket:null,

      aTypeSelect: [],
      isShowRelate:false,
      xiaojiaVisible: false,
      wfBusinessProcessData:{},
      relate_id:'',
      params:{},

      isShowCancel:false,
    };
  },
  components:{
      'v-panel':Panel
  },
  methods: {

    cancelLeave(){

        var params = {
            subProcessId: this.params.subProcessId,
        };
        this.Axios
            .Post(this.URL.executeCancel.url,params)
            .then(res => {
                if (res.data.status == 1) {
                    Toast({
                        message: res.data.message || '撤销申请成功',
                        position: "center",
                        className: "toastStyle",
                        duration: 1000
                    });
                    location.reload();
                } else {
                    Toast({
                        message: res.data.message || '撤销申请失败',
                        position: "center",
                        className: "toastStyle",
                        duration: 1000
                    });
                }
            });        
    },


    loadEnd:function(){
        this.spinnerShow = false;
    },

    handleStatus:function(status,type){
        if (type) {
            return status == 1 ? {'Appro':true} : (status == 2 ? {'waitAppro':true} : {'reject':true});
        }
        switch (status) {
            case 0 : 
                return '已拒绝'
                break;                  
            case 1 :
                return '已备案'
                break;
            case 2 :
                return '审批中'
                break;
            case 3 :
                return '已撤销'
                break;                
        }
    },

    showDetail:function(){

        if (this.isFirstShow) {
            this.spinnerShow = true;
            this.showPanel = true;
            this.secondShow = true;
        } else {
            this.spinnerShow = false;
            this.secondShow = true;
        }
        
    },


      hasClass:function(status){
            // var status = this.itemData.auditStatus || this.itemData.activityFlag;
            if (!status) {return;}
            if (status.indexOf('拒绝') > -1) {
                return {'reject':true};
            } else if (status.indexOf('审批中') > -1 || status.indexOf('备案中') > -1 || status.indexOf('待备案') > -1 || status.indexOf('待审批') > -1) {
                return {'waitAppro':true};
            } else if(status.indexOf('已备案') > -1 || status.indexOf('已同意') > -1 || status.indexOf('审批同意') > -1){
                return {'Appro':true}
            }else{
                return {'color':true};
            }
      },
      handleColor(str) {
          switch (str) {
              case 1:
                return {'Appro':true};
                break;
              case '已备案':
                return 'pass';
                break;
              case 0:
                return {'waitAppro':true};
                break;
              case 5:
                return {'color':true};
                break;
              case 7:
                return {'Appro':true};
                break;
              case 6:
                return {'waitAppro':true};
                break;
              case 3:
                return {'reject':true};
                break;
              default:
                return {'waitAppro':true};
                break;
          }
      },
      setColor:function(k){
           if (!k) {
                return;
           }
           if (k.status == 2 || k.status == 6) {
               return 'color';
           } else if (k.status == 3 || k.status == 7 || k.status == 1 || k.status == 5) {
               return 'colorPass'
           }else {
               return 'colorDark';
           }
        
      },
      getXiaojiaButton (busi_id) {
        let params = {
            busiId: busi_id
        }

        this.Axios
            .Post(this.URL.ishow.url, params)
            .then((res) => {
                res.data.datas && (this.isShowBack = parseInt(res.data.datas))
            })
      },
      getDetail:function(){

          let params = {
              applyId: this.busi_id,
              exectionId: this.busi_id
          };

          this.Axios
            .Post(this.URL.examineBydetails.url, params)
            .then((res) => {
                this.res = res.data.datas || {};
                this.relateId = this.res.relate_id || '';

                this.zhihuirens =  this.res.ZHR || '';
    
            })

      },
      getVacationDetail() {
          this.Axios.Post(this.URL.getLeaveInstruction.url).then(res => {
              let datas = res.data.datas;
              this.aTypeSelect = datas;
          });
      },
      isLeaveOrXiao:function(val){
          return val == '1' || val == '2'? '请' : '销' ;
      },
      handleLeaveReason(excuteType){
        if (excuteType == 1 || excuteType == 2) {
            return this.res.wfBusinessProcessData.leaveReason 
        } else if (excuteType == 3 || excuteType == 4) {
            return this.res.wfBusinessProcessData.sickLeaveReason
        }
        
      },
      goToDetail:function(type){

          var name  = '';
          if (this.res.executeType =="2" || this.res.executeType=="4") {
               name= this.wfBusinessProcessData.emplname;
          }          
          localStorage.setItem('backBSId',JSON.stringify({
              "wfMainId":this.res.wfMainProcess.id,
              "subId":this.busi_id,
              'name':name
          }));
          location.href="/module/backLeave.html";
      },
      textExtension:function(item){
         if ((/(\.jpg|\.png|\.gif|\.ps|\.jpeg)$/g).test(item.fileName)){
             return 'icon-img';
         } else if ((/(\.word|\.doc|\.docx)$/g).test(item.fileName)) {
             return 'icon-word'
         } else if ((/(\.pdf)$/g).test(item.fileName)) {
             return 'icon-pdf'
         } else if ((/(\.ppt|\.pptx)$/g).test(item.fileName)) {
             return 'icon-ppt'
         } else if ((/(\.xls|\.xlsx)$/g).test(item.fileName)) {
             return 'icon-excel'
         } else {
             return 'icon-docu'
         }
      },


      previewPhoto:function(index){


            console.log(this.imgUrlList,this.imgUrlList[index],index,'previewImg')
            try {
                wx.previewImage({
                    current: this.imgUrlList[index], // 当前显示的图片链接
                    urls: this.imgUrlList // 需要预览的图片链接列表
                });
            }catch(err){
                console.log(err);
            }


      },

        previewFile : function(k){

            // console.log('url',this.Axios.baseURI + this.URL.downloadFile.url + "?id=" + k.id + "&token="+ this.token)
            // console.log('name',k.fileName)
            // console.log('wx',wx)
            wx.previewFile({
                url: this.Axios.baseURI + this.URL.downloadFile.url + "?id=" + k.annexId + "&token="+ this.token, // 需要预览文件的地址(必填，可以使用相对路径)
                name: k.fileName,
                size: '7134969'
            });   
            // wx.previewFile({
            //     url: 'https://m2.cmhk.com/WXP/attachProxy?id=15d1473008107e82f26434f4d1489f3c&user=xgt&password=ff7314db6b3cd57dc966259f7be35e68', // 需要预览文件的地址(必填，可以使用相对路径)
            //     name: '商业银行业务连续性监管指引.pdf',
            //     size: '7134969'
            // });   
                   
        },

       wxConfig : function () {
            //alert('ddd='+jsapi_ticket);
            //获取当前url，不含#以及之后的部分
            //var timestamp = new Date().getTime(); //生成签名的时间戳(当前时间)
		    var timestamp = Date.parse(new Date())/1000;
		    var noncestr = this.randomString(16);
            var url = window.location.href;
            // var url = 'http://m2.cmhk.com:8080/module/approveDetail.html';
            var index = url.indexOf('#');
            if(index !== -1 ) {
                url = url.slice(0,index);
            }
            // this.jsapi_ticket="HoagFKDcsGMVCIY2vOjf9gXRpbaCGInwR_o3ym04PkbYRz1T-fxUauc36IU38BE7ypXPvQn1Jj593lCYf-SdIw";
            var temp = "jsapi_ticket="+this.jsapi_ticket+"&noncestr="+noncestr+"&timestamp="+timestamp+"&url="+url;
            console.log("jsapi_ticket="+this.jsapi_ticket);
            console.log("timestamp="+timestamp);
            console.log("noncestr="+noncestr);
            console.log("temp="+temp);
            var signature = sha1(temp);
            console.log("signature="+signature);
            console.log("wx配置注册================");
            wx.config({
                beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: 'ww8976d3a691029d70', // 必填，企业微信的corpID
                timestamp: timestamp, // 必填，生成签名的时间戳
                nonceStr: noncestr, // 必填，生成签名的随机串
                signature: signature,// 必填，签名，见[附录1](#11974)
                jsApiList: [
                    'checkJsApi',
                    'previewImage',
                    'previewFile'

                ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            });
        
            wx.ready(() => {
                console.log('ready');
                //分享到朋友圈
                //wx.previewImage({
                //    current: '', // 当前显示的图片链接
                //    urls: [] // 需要预览的图片链接列表
                //});
                this.checkJsApi();


            });
            wx.error(function(res){
            	console.log("微信JS SDK配置错误！",res);
            });
        },
        checkJsApi:function(){
            console.log("checkJsApi");
            wx.checkJsApi({
                jsApiList: ["previewImage", "previewFile"],
                success: function(a) {

                },
                fail:function(err){
                    console.log(err,'errJSCheck')
                }
            });
        },
        randomString : function(len) {
            len = len || 32;
            var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';  /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
            var maxPos = $chars.length;
            var pwd = '';
            for (var i = 0; i < len; i++) {
            pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
            }
            return pwd;
        },

        initData(){
            this.Axios
                .Post(this.URL.examineBydetails.url, this.params)
                .then(res => {
                    this.res = res.data.datas;
                    this.wfBusinessProcessData = this.res.wfBusinessProcessData;
                        
                    if (this.isLeaveOrXiao(this.res.executeType) == '请') {
                        var relate_id = this.res.wfMainProcess.endSubProcessId;
                        this.isShowRelate = relate_id ? true : false; //显示关联请销假记录按钮
                        this.xiaojiaVisible = this.res.wfMainProcess.executeSubProcessKey !== this.res.wfMainProcess.startSubProcessKey && !relate_id ? true : false; //显示是否可以发起销假按钮
                        this.relate_id = relate_id;
                    } else {
                        var relate_id = this.res.wfMainProcess.startSubProcessId;
                        this.isShowRelate = relate_id ? true : false; //显示关联请销假记录按钮
                        this.relate_id = relate_id;
                    }
                    console.log(this.relate_id,'this.relate_id');
                    

                    this.res.sponsorNodes[0].status = 5; //自定义status 为5
                    if (this.res.recordNodes && this.res.recordNodes.length) {
                        if (this.res.recordNodes[0].status == 2){
                            this.res.recordNodes[0].status = 6;
                        } else if (this.res.recordNodes[0].status == 1){
                            this.res.recordNodes[0].status = 7;
                        } else if (this.res.recordNodes[0].status == 3){
                            this.res.recordNodes[0].status = 3;
                        }else {
                            this.res.recordNodes[0].status = 8;
                        }
                    }

                    //显示撤销按钮
                    this.isShowCancel = this.res.readTime ? false : true;

                    //处理出文件是 图片和其他两种
                    var resultList = this.res.annexNexus;
                    resultList.forEach((val, index, arr) => {
                        console.log(this.textExtension(val.fileName),'this.textExtension(val.fileName)')
                        if (this.textExtension(val) === 'icon-img') {
                            this.imgList.push(val);
                            this.imgUrlList.push(
                                this.Axios.baseURI +
                                    '/' +
                                    this.URL.downloadFile.url +
                                    '?id=' +
                                    val.annexId +
                                    '&token=' +
                                    this.token
                            );
                        } else {
                            this.fileList.push(val);
                        }

                    });

                    //流程日志
                    this.LogList = this.res.sponsorNodes.concat(this.res.approvalNodes,this.res.recordNodes || []);
                    
                    this.res.copySends.forEach((ele, index, arr)=>{
                        this.zhihuirens.push(ele.toEmplName)
                    }) 

                });

        if (window.location.hostname == "localhost" || window.location.hostname == "10.5.0.137" || window.location.hostname == '10.16.3.104' || window.location.hostname == '202.104.142.49') {

        } else {
            this.Axios
            .Post(this.URL.getTicket.url, {})
            .then((res) => {
                this.jsapi_ticket = res.data.datas.result.ticket;
                console.log(this.jsapi_ticket,'this.jsapi_ticket');
                this.wxConfig();               
            })
        }            
            
            this.getVacationDetail();
        }
  },
  computed:{
    isLeaveICon:function(){
        if ((this.busi_id && this.busi_id.indexOf('XJ')>-1)|| (this.busi_id && this.busi_id.indexOf('XJ')>-1)) {
            return false;
        }
        return true;
    },

  },
  filters:{
    handleEndTime:function(val){
        if (val){
          return val.replace(/\-/g,'.').slice(5);
        }
    },
    ampm: function(value) {
        if (value == '1') {
            return '上午';
        } else if (value == '2') {
            return '下午';
        }
    },
    handleTitle:function(val){
        return val == '1' || val == '2' ? '请' :  '销';
    },
    handleTarget:function(val){
        return val == '1' || val == '2' ? '销' :  '请';
    },
    handleDisplayDate:function(val){
        if (val) {
            if (typeof val === 'string' && val.split(' ').length>1) {
                return val.split(' ')[0].replace(/\-/g, '.');
            }
            var dataObj = new Date(val);
            var year = dataObj.getFullYear();
            var month = dataObj.getMonth() + 1;
            month = month > 9 ? month : '0' + month;
            var day = dataObj.getDate();
            day = day > 9 ? day : '0' + day;
            return year + "." + month + "." + day 
        } else {
            return ''
        }
    },
    handleLogDate:function(val){
        if (val) {
            if (typeof val === 'string' && val.split(' ').length>1) {
                var splitArr = val.split(' ')[0].split('-');
                return splitArr[1].replace(/0/,'') + "." + splitArr[2].replace(/0/,'');
            }
            var dataObj = new Date(val);
            var month = dataObj.getMonth() + 1;
            var day = dataObj.getDate();
            day = day > 9 ? day : '0' + day;
            return  month + "." + day 
        } else {
            return ''
        }
    },
    handleDateToSeconds:function(time){
        if (time) {
            if (typeof time === 'string' && time.split(' ').length>1) {
                // var splitArr = time.split(' ')[0].split('-');
                var lastIndex = time.lastIndexOf(':');
                var timeStr = time.substring(0,lastIndex).trim();
                return timeStr;
            }
            var dataObj = new Date(time)
            var year = dataObj.getFullYear();
            var month = dataObj.getMonth() + 1;
            month = month > 9 ? month : '0' + month;
            var day = dataObj.getDate();
            day = day > 9 ? day : '0' + day;
            var hours = dataObj.getHours();
            hours = hours > 9 ? hours : '0' + hours;
            var minutes = dataObj.getMinutes();
            minutes = minutes > 9 ? minutes : '0' + minutes;
            var seconds = dataObj.getSeconds();
            seconds = seconds > 9 ? seconds : '0' + seconds;
            return year + "-" + month + "-" + day + '   '  + hours + ':' + minutes;
        } else {
            return ''
        }        
    },
    alterStatusTitle:function(strNum){
        if (typeof strNum === 'string') {
            return strNum;
        } 
        switch (strNum) {
            case 0 : 
                return '待审批'
                break;                  
            case 1 :
                return '已审批'
                break;
            case 2 :
                return '审批中'
                break;
            case 3:
                return '已拒绝'
                break;
            case 4:
                return '无需执行'
                break;
            case 5: //自定义status 5 后台不返回
                return '我发起'
                break;
            case 6 :
                return '备案中'
                break;
            case 7 :
                return '已备案'
                break;
            case 8 :
                return '待备案'
                break;
            case 9 :
                return '待审批'
                break;

        }
    },

  },
  watch: {

  },
  created(){
    
// window.location.hostname != '202.104.142.49' && 
    var paras = {};
    if (window.location.origin != 'http://202.104.142.49:8089' && window.location.hostname != 'localhost' && location.search && location.search.split('&').length>1) {

            var arr = [], params={};
            arr = location.search.split('?')[1].split('&');

            arr.forEach(function(val,index,arr){
                var keyArr = val.split('=');
                var key = keyArr[0];
                var value = keyArr[1];
                params[key] = value;
            });

            this.token = params['token'];
            localStorage.setItem('token', this.token);
            paras.subProcessId = params['busiId'];
            this.params = paras;

            this.Axios.Post(this.URL.webLogin.url, {}).then(res => {
                if (res.data.status === 1) {
                    this.initData();
                }
            })
        
    } else {

        this.token = localStorage.getItem('token');
        this.busi_id = localStorage.getItem('St_BsId');
        this.params = {
            subProcessId: this.busi_id
        }; 

        this.initData();


    }


  },
  mounted: function() {


  }
};
</script>

<style >
    html body{
      background-color:#F3F3F3;
    }

</style>
<style lang="less" scoped="scoped">
    .colorPass{
        color:#7DB6E0 !important;
    }
    .colorDark{
        color:#A09B9B;
    }
    .color{
        color:#F55E03;
    }
    .isAppro{
        color:#D8D41D;
    }
    .reject{
        color:#E24040;
    }
    .waitAppro{
        color:#D8D41D;
    }
    .Appro{
        color:#48A18C;              
    }

  .approDetail{
      font-family:   "Microsoft YaHei", "微软雅黑";
      .approveItem{
          
          padding-top:0.26rem;
          background-color:#fff;
          .titleDesc{
              padding-left:0.3rem;
              font-size:0.4rem;
              position: relative;
              line-height:0.48rem;
          }
          p{
            display:flex;
            font-size:0.32rem;
            color:#999;
            padding-left:0.3rem;
            margin:0.1rem auto;
            align-items: center;
            .leaderAppr{
              color:#D8D41D;
            }
            i{
              margin-right:0.1rem;
            }
          }
          .borderColor{
            border-bottom:1px solid #F3F3F3;
          }
      }

      .desc{
          font-size:0.32rem;
          padding-bottom:0.8rem;
          background-color:#fff;
          padding-top:0.2rem;
          li{
            line-height:0.6rem;
            display: flex;
            align-items: flex-start;
            align-content: flex-start;
            .title{
              color:#999;
              width: 2rem;
              margin:0 0.2rem 0 0.3rem;
            }
            .desc_detail{
              word-wrap:break-word;
              word-spacing:normal;
              max-width:5.2rem;
            }
          }
          .startItem {
              display: flex;
              margin-top:0.12rem;
              .leftCon{
                  color:#999;
                  margin: 0 0.86rem 0 0.3rem;               
              }
              .fluid{
                  flex: 1;
                  padding-right:0.3rem;
                  img{
                    display: inline-block;
                    max-height:1rem;
                    margin-right:0.1rem;
                  }

              }
          }

      }
      .bgColor{
        height:0.1rem;
        background-color:#F3F3F3;
      }
      .progress {
          display: flex;
          margin-bottom:0.1rem;
          background-color:#fff;
          border-bottom: 1px solid #F3F3F3;
          .leftCon{
              margin:0 0.3rem;   
              border-left:0.02rem dotted #999;             
          }
          .fluid{
              flex: 1;
              padding-right:0.3rem;
              i.icon-process{
                color: #aaa;
                position: absolute;
                left: -0.46rem;
                top: 0.26rem;
                z-index:100;
              }
              ul{
                  margin-top:0.24rem;
                  margin-bottom:0.3rem;
                  li{
                    position:relative;
                    font-size:0.28rem;
                    line-height:0.8rem;
                    >span:not(.name){
                      display:inline-block;
                      line-height:0.28rem;
                    }
                    .color{
                        color:#F55E03;
                    }
                    .success{
                      color:#339966;
                    }
                    .isAppro{
                      color:#D8D41D;
                    }
                    .reject{
                        color:#E24040;
                    }
                    .waitAppro{
                        color:#D8D41D;
                    }
                    .Appro{
                        color:green;                
                    }
                    .name{
                      font-size:0.32rem;
                      margin-right:0.1rem;
                      font-weight:600;
                    }
                    .dept{
                      margin-right:0.2rem;
                    }
                    .start{
                      margin-right:0.3rem;
                    }
                    // .time{
                    //   margin-right: 0.32rem;
                    // }
                    div.apprDesc{
                      font-size:0.32rem;
                      word-wrap:break-word;
                      word-spacing:normal;
                      max-width: 6.5rem;
                    }
                    div.detail{
                      // display: inline-block;
                      // width:80%;
                      float:right;
                      line-height:0.28rem;
                      vertical-align: middle;
                      text-align:right;
                    }
                  } 
              }

          }
      }
      .fixedToBottom{
          position:fixed;
          width:100%;
          z-index:1000;
          bottom:0;
          left:0;
          height:1.1rem;
          line-height:1.1rem;
          background-color:#fff;
          div{
            vertical-align: middle;
            text-align:center;
            -webkit-tap-highlight-color: transparent;
            width: 4rem;
            height:0.8rem;
            line-height:0.8rem;
            font-size: 0.4rem;
            margin: auto auto;
            padding: 0rem 0;
            border-radius: 0.56rem;
            text-align: center;
            background-color: #26a2ff;
            color: #fff;
          }
      }
  }


  .bgColorBottom{
      height: 1.1rem;
      width:100%;
  }
  .showButton{
    height: 0.6rem;
    line-height:0.6rem;
    border: none;
    width:100%;
    text-align:left;
    padding-left:0.3rem;
    outline: none;
    font-size: 0.32rem;
    font-weight: normal;
    color: #fff;
    color: #007de4;
  }
.spinner>div{
    position: fixed;
    top:0;
    bottom:0;
    left: 0;
    right:0;
    margin:auto;
    width: 1rem !important;
    height: 0.8rem !important;
}


</style>

